<template>
  <div class="profile-collect">
    <div class="content">
      <div class="box-item" v-for="(item,index) in $store.state.collectListInfo"
           :key="index" @click="itemClick(index)">
        <div class="left">
          <img :src="item.listPic" alt="">
        </div>
        <div class="title">
          <p>{{item.listName}}</p>
        </div>
        <div class="count">
          <p>{{item.listCount}}首</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ProfileCollectList",
        methods:{
            itemClick(index){
                // console.log(this.$store.state.collectListInfo[index].listId)
                this.$router.push('/songlist/' + this.$store.state.collectListInfo[index].listId)
            }
        },
    }
</script>

<style scoped>
  .profile-collect{
    width: 100%;
    margin-top: 10px;
  }

  .content{
    width: 100%;
    margin-bottom: 15px;
  }

  .box-item{
    margin-bottom: 10px;
    position: relative;
    height: 80px;
  }

  .left{
    width: 80px;
    height: 80px;
  }

  .left img{
    width: 80px;
    height: 80px;
    border-radius: 5px;
  }

  .title{
    height: 22px;
  }

  .title p{
    width: 260px;
    vertical-align: center;
    position: absolute;
    top: 8px;
    left: 95px;
    font-size: 14px;

    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 1; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }

  .count{
    height: 23px;
  }


  .count p{
    vertical-align: center;
    font-size: 12px;
    position: absolute;
    top: 35px;
    left: 95px;
  }

</style>